<template>
  <!-- 回收订单  完成交易 -->
  <el-dialog @close="close" class="pick-dialog" title="完成交易" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1000px">
    <div class="form-box">
      <div class="order-info flex">
        <span>订单编号： {{ruleForm.no}}</span>
        <span>创建时间： {{ruleForm.createTime}}</span>
      </div>
      <el-descriptions title="订单信息" :column="3" border :labelStyle="{width:'120px'}">
        <el-descriptions-item label="订单状态"><el-tag :type="commonMaps.backOrderStateMap[ruleForm.orderStatus||1].type">{{commonMaps.backOrderStateMap[ruleForm.orderStatus||1].label}}</el-tag></el-descriptions-item>
        <el-descriptions-item label="支付状态"><span>
            <el-tag type="success" v-if="ruleForm.buyerPayStatus==2">已支付</el-tag>
            <el-tag type="danger" v-if="ruleForm.buyerPayStatus==1">未支付</el-tag>
            <el-tag type="warning" v-if="ruleForm.buyerPayStatus==3">打款中</el-tag>
            <el-tag type="info" v-if="ruleForm.buyerPayStatus==4">财务拒绝</el-tag>
          </span></el-descriptions-item>
        <el-descriptions-item label="换绑状态"><span>
            <el-tag v-if="ruleForm.changeBindState==1" :type="'danger'">未换绑</el-tag>
            <el-tag v-if="ruleForm.changeBindState==2" :type="'success'">已换绑</el-tag>
          </span></el-descriptions-item>

        <el-descriptions-item label="回收订单编号">{{ruleForm.no}}</el-descriptions-item>
        <el-descriptions-item label="买家">{{ruleForm.buyerTenantName}}</el-descriptions-item>
        <el-descriptions-item label="卖家">{{ruleForm.sellerName}}<span v-if="ruleForm.orderType==2">({{ ruleForm.sellerTenantName }})</span></el-descriptions-item>
        <el-descriptions-item label="游戏名称">{{ruleForm.gameName}}</el-descriptions-item>
        <el-descriptions-item label="区服">
          {{ruleForm.qufu}}
        </el-descriptions-item>
        <el-descriptions-item label="实名">{{ruleForm.relname||'暂无'}}</el-descriptions-item>
        <el-descriptions-item label="游戏账号">{{ruleForm.accountNumber}}</el-descriptions-item>
        <el-descriptions-item label="游戏密码" :span="3">{{ruleForm.accountPassword}}</el-descriptions-item>

        <!-- <el-descriptions-item label="简介" :span="3">
          <div style="max-height: 200px;overflow-y: auto;">{{ruleForm.des}}</div>
        </el-descriptions-item>
        <el-descriptions-item label="图片" :span="3">
          <div class="img-box flex">
            <div v-for="(item, ind) in desImglist" :key="item">
              <img :src="item" @click="review(desImglist,ind)" />
            </div>
          </div>
        </el-descriptions-item> -->
        <el-descriptions-item label="包赔商" v-if="ruleForm.guaranteeTenantId">{{ruleForm.guaranteeTenantName}}</el-descriptions-item>
        <el-descriptions-item label="包赔费" v-if="ruleForm.guaranteeTenantId">
          <span style="color:red">{{ruleForm.guaranteeAmount}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="手续费" v-if="ruleForm.guaranteeTenantId">
          <span style="color:red">{{ruleForm.guaranteeServiceAmount||'--'}}</span>
        </el-descriptions-item>
           <el-descriptions-item v-if="ruleForm.orderType == 4" label="线索价">
          <span style="color:red">{{ruleForm.clueAmount}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="回收价">
          <span style="color:red">{{ruleForm.backAmount}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="总金额">
          <span style="color:red">{{ruleForm.buyerActualAmount}}</span>
        </el-descriptions-item>
        <!-- <el-descriptions-item label="包赔客服" v-if="ruleForm.guaranteeTenantId">{{ruleForm.guaranteeName}}</el-descriptions-item> -->
        <el-descriptions-item label="备注" :span="3">{{ruleForm.remark}}</el-descriptions-item>
      </el-descriptions>
      <!-- <el-descriptions title="卖家信息" :column="3" border :labelStyle="{width:'120px'}">
        <el-descriptions-item label="卖家姓名">{{baopeiInfo.name}}</el-descriptions-item>
        <el-descriptions-item label="卖家手机">{{baopeiInfo.phoneNumber}}</el-descriptions-item>
        <el-descriptions-item label="身份证号" :span="2">{{baopeiInfo.idCard}}</el-descriptions-item>
        <el-descriptions-item label="附件图片" :span="3">
          <div class="img-box flex">
            <div v-for="(item, ind) in baopieInfoImgs" :key="item">
              <img :src="item" @click="review(baopieInfoImgs,ind)" />
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions> -->

      <!-- 可以更改的状态 -->
       <!-- <div class="tip">请确认支付状态和换绑状态！</div> -->
      <el-form style="margin-top: 15px;" :model="ruleForm" ref="ruleForm" :inline="true" class="search-form-new" label-width="90px" v-if="ruleForm.orderType!=4">

        <el-form-item label="支付状态" prop="buyerPayStatus">
          <el-select v-model="ruleForm.buyerPayStatus" placeholder="请选择" >
            <el-option label="未支付" :value="1" />
            <el-option label="已支付" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="换绑状态" prop="changeBindState">
          <el-select v-model="ruleForm.changeBindState" placeholder="请选择" >
            <el-option label="未换绑" :value="1" />
            <el-option label="已换绑" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="放款状态" prop="guaranteePayStatus" v-if="ruleForm.guaranteeId">
          <el-select v-model="ruleForm.guaranteePayStatus" placeholder="请选择" >
            <el-option label="未放款" :value="1" />
            <el-option label="已放款" :value="2" />
          </el-select>
        </el-form-item>

      </el-form>

      <!-- <div class="sfk">
        <span>总金额：</span>
        <span class="price">
          <span>¥</span><span class="txt">{{ ruleForm.buyerActualAmount || 0 }}</span>
        </span>
      </div> -->

      
    </div>
    <div class="center">
        <el-button @click="close('ruleForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">完成交易</el-button>
      </div>
  </el-dialog>
</template>

<script>
import onSelfApi from "@/api/retrieveManage/onSelf.js";
export default {
  name: "SaleOrderDetail",
  components: {},
  data() {
    return {
      dialogVisible: false,
      loading: false,
      isEdit: false,
      payQrShow: false,
      info: "",
      infoArr: [],
      ruleForm: {},
      orderId: "",
      payForm: "",
      from: "",
      baopei: "",
      baopeoList: [],
      payWay: 2,
      showTip: false,
      baopeishang: "",
      timer: 0,
      desImglist: [],
      baopieInfoImgs: [],
      baopeiInfo: {},
    };
  },
  created() {},
  methods: {
    open(orderId, from) {
      this.from = from || "";
      this.loading = false;
      this.orderId = orderId;
      this.getDetail();

      this.dialogVisible = true;
    },
    getDetail() {
      onSelfApi.getBackClueOrderInfo(this.orderId).then((res) => {
        //console.log("%c Line:137 🍧 订单详情res", "color:#ffdd4d", res);
        this.ruleForm = res.data;
        const arrtemp = [];
        if (this.ruleForm.img) {
          const arr = JSON.parse(this.ruleForm.img);
          if (arr.length) {
            arr.forEach((r) => {
              arrtemp.push(r.url);
            });
          }
        }
        if (this.ruleForm.relnameImg) {
          arrtemp.push(this.ruleForm.relnameImg);
        }
        this.desImglist = arrtemp;
        this.baopieInfoImgs = [];
        if (this.ruleForm.guaranteeInfo) {
          this.baopeiInfo = JSON.parse(this.ruleForm.guaranteeInfo);
          if (this.baopeiInfo.handIdcardImg) {
            this.baopieInfoImgs.push(this.baopeiInfo.handIdcardImg);
          }
          if (this.baopeiInfo.faceIdcardImg) {
            this.baopieInfoImgs.push(this.baopeiInfo.faceIdcardImg);
          }
          if (this.baopeiInfo.emblemIdcardImg) {
            this.baopieInfoImgs.push(this.baopeiInfo.emblemIdcardImg);
          }
          if (this.baopeiInfo.img) {
            const arr = JSON.parse(this.baopeiInfo.img);
            arr.forEach((r) => {
              if (r.url) {
                this.baopieInfoImgs.push(r.url);
              }
            });
          }
        }
      });
    },
    review(list, ind) {
      this.$viewerApi({
        images: list,
        options: {
          initialViewIndex: ind,
        },
      });
    },
    submitForm() {
      let str = ''
      if(this.ruleForm.orderType == 4) {
        str = '完成订单后，系统将自动分账，各方应得金额将转入各自余额'
      }else {
         if(this.ruleForm.buyerPayStatus==1){
            tr = str +'当前订单支付状态为[未支付]， '
        }
         if(this.ruleForm.changeBindState==1){
        str = str +'当前订单换绑状态为[未换绑]， '
      }
      if(this.ruleForm.guaranteeId&&this.ruleForm.guaranteePayStatus==1){
        str = str +'当前订单放款状态为[未放款]， '
      }
      if(!str){
        str = '请确认该回收订单各方均已完成，完成后不可撤销, 是否继续?'
      }else{
        str = str + '确定完成订单吗?'
      }
      }
     
     
      this.$confirm(
        str,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "",
        }
      )
        .then(() => {
          let obj
           if(this.ruleForm.orderType == 4) {
              obj= {
                id: this.ruleForm.id,
             };
           }else{
            obj = {
            id: this.ruleForm.id,
            buyerPayStatus: this.ruleForm.buyerPayStatus,
            changeBindState: this.ruleForm.changeBindState,
            guaranteePayStatus: this.ruleForm.guaranteePayStatus,
          };
            
           }
          onSelfApi.backClueOrderFinishOrder(obj).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.$parent.getList();
            this.close();
          });
        })
        .catch(() => {});
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    close(formName) {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.form-box {
  padding: 15px;
  // width: 1000px;
  .img-box {
    flex-wrap: wrap;
    img {
      width: 100px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}

.order-info {
  box-sizing: border-box;
  // height: 50px;
  background: #eee;
  padding: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  line-height: 26px;

  > span {
    margin-right: 20px;
  }
}

.price-box {
  text-align: right;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  padding-right: 20px;
}
.payway-box {
  justify-content: flex-end;
}
.payway-item {
  width: 150px;
  border: 1px solid #999;
  border-radius: 2px;
  padding: 5px 10px;
  margin-left: 15px;
  margin-bottom: 15px;
  font-size: 18px;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;

  img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .icon {
    display: none;
    position: absolute;
    top: 10px;
    right: 3px;
  }
  &.active {
    border: 2px solid #f7423f;
    .icon {
      color: #f7423f;
      display: block;
    }
  }
}

.sfk {
  text-align: right;
  padding-right: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 10px;

  .txt {
    font-size: 26px;
    color: #ff0000;
    margin-left: 5px;
  }
}

.demo-ruleForm {
  padding-right: 20px;
}



::v-deep .el-dialog__body {
  padding-top: 10px !important;
}

.pick-dialog >>> .el-input--medium input {
  text-align: left;
}
</style>
